<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <#assign currentMenu="hotel"/>
    <#include "../common/header.ftl">
    <script src="/js/plugins/jquery-bootstrap/jquery.bootstrap.min.js"></script>
    <script src="/js/plugins/My97DatePicker/WdatePicker.js"></script>
    <script src="/js/plugins/jquery-form/jquery.form.js"></script>
    <script src="/js/ckeditor/ckeditor.js"></script>
    <style type="text/css">
        .modal-body {
            max-height: 750px;
            overflow-y: auto;
        }

        .modal-body img {
            width: 100%;
        }
    </style>
</head>
<body>

<div class="container" style="margin-top: 20px">
    <#include "../common/top.ftl">
    <div class="row">
        <div class="col-lg-3">
            <#include "../common/menu.ftl">
        </div>
        <div class="col-lg-9">
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-head-line">酒店管理</h1>
                </div>
            </div>
            <!--高级查询--->
            <form class="form-inline" id="searchForm" action="/hotel/list.do" method="post">
                <input type="hidden" name="currentPage" id="currentPage" value="1">
                <div class="form-group">
                    <label>关键字:</label>
                    <input type="text" class="form-control" name="keyword" value="${(qo.keyword)!}"
                           placeholder="请输入酒店名称">
                </div>
                <div class="form-group">
                    <label>时间:</label>
                    <input type="text" class="form-control" id="beginTime" name="beginTime" placeholder="请输入到店时间"
                           onclick="WdatePicker()">
                    ~
                    <input type="text" class="form-control" id="endTime" name="endTime" placeholder="请输入离店时间"
                           onclick="WdatePicker()">
                </div>
                <button id="btn_query" class="btn btn-info">
                    <span class="glyphicon glyphicon-search"></span> 查询
                </button>
                <a href="javascript:" class="btn btn-success inputBtn">
                    <span class="glyphicon glyphicon-plus"></span> 新增
                </a>
            </form>
            <table class="table table-striped table-hover">
                <tr>
                    <th>序号</th>
                    <th>名称</th>
                    <th>图片</th>
                    <th>价格</th>
                    <th>地址</th>
                    <th>空闲时间</th>
                    <th>入住人员</th>
                    <th>操作</th>
                </tr>
                <#list pageInfo.list as entity>
                    <tr>
                        <td>${entity_index + 1}</td>
                        <td>${entity.name}</td>
                        <td><img src="${entity.roomUrl}" width="88"></td>
                        <td>${entity.price}</td>
                        <td>${entity.place}</td>
                        <td>${entity.accommodation?string('yyyy-MM-dd')}</td>
                        <td>${entity.guest}</td>
                        <td>
                            <a role="button" class="btn btn-success btn-xs commendBtn" data-json='${(entity.json)!}'>
                                <span class="glyphicon glyphicon-ok "></span> 修改
                            </a>
                            <a role="button" class="btn btn-danger btn-xs changeSaveBtn">
                                <span class="glyphicon glyphicon-remove "></span> 删除
                            </a>
                        </td>
                    </tr>
                </#list>
            </table>
            <#include "../common/page.ftl">
        </div>
    </div>
</div>

<#--设为增加或修改显示模态框-->
<div id="inputModal" class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">酒店管理</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" action="/hotel/saveOrUpdate.do" method="post"
                      enctype="multipart/form-data" id="editForm">
                    <input type="hidden" name="id"/>
                    <div class="form-group">
                        <label class="col-lg-4 control-label">名称：</label>
                        <div class="col-lg-6">
                            <input type="text" class="form-control" name="name"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-4 control-label">图片：</label>
                        <div class="col-lg-6">
                            <img id="roomUrl" style="width: 100%"/>
                            <input type="file" class="form-control" name="img"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-4 control-label">价格：</label>
                        <div class="col-lg-6">
                            <input type="number" class="form-control" name="price"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-4 control-label">地址：</label>
                        <div class="col-lg-6">
                            <input type="text" class="form-control" name="place"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-4 control-label">空闲时间：</label>
                        <div class="col-lg-6">
                            <input type="text" class="form-control" name="accommodation"
                                   onclick="WdatePicker();"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-4 control-label">入住人员：</label>
                        <div class="col-lg-6">
                            <div class="col-lg-6">
                                <input type="number" class="form-control" name="guest"/>
                            </div>
                        </div>
                    </div>
                <#--ck富文本编辑器容器-->
                    <div class="form-group">
                        <textarea name="hotelContent.content" id="ckeditor"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary submitBtn">保存</button>
            </div>
        </div>
    </div>
</div>
<script src="/js/ckeditor/ckeditor.js"></script>
<script type="text/javascript">
    // 页面加载完毕
    $(function () {
        //初始化富文本编辑器
        var ckeditor = CKEDITOR.replace('ckeditor');
        // 给下架按钮事件
        $(".changeSaveBtn").click(function () {
            var json = $(this).data("json");
            // 执行异步请求操作之前先提示
            $.messager.confirm("温馨提示", "确定要执行操作吗?", function () {
                // 发送异步请求
                $.get("/travel/delete.do", {id: json.id}, function (data) {
                    if (data.success) {
                        window.location.reload();
                    } else {
                        $.messager.alert("温馨提示:", "网络繁忙,请稍后再试");
                    }
                });
            });
        });

        // 给修改按钮绑定事件
        $(".commendBtn").click(function () {
            $("#editForm input").val("");
            $("#coverUrl").attr("src", "");
            // 获取data属性中的json数据
            var json = $(this).data("json");
            // 给模态框设置回显数据
            // 设置酒店id
            $("#editForm input[name='id']").val(json.id);
            // 设置酒店名称
            $("#editForm input[name='name']").val(json.name);
            // 设置酒店图片
            $("#roomUrl").attr("src", json.roomUrl);
            // 设置价格
            $("#editForm input[name='price']").val(json.price);
            // 设置地址
            $("#editForm input[name='place']").val(json.place);
            // 设置空闲时间
            $("#editForm input[name='accommodation']").val(json.accommodation);
            // 设置入住人数
            $("#editForm input[name='guest']").val(json.guest);
            //查询出详情内容放到富文本编辑器中
            $.get("/hotel/getContent.do", {id: json.id}, function (data) {
                ckeditor.setData(data.content)
            });
            // 显示模态框
            $("#inputModal").modal('show');
        });

        $(".inputBtn").click(function () {
            $("#editForm input").val("");
            $("#coverUrl").attr("src", "");
            $("#inputModal").modal('show');
        })
        // 模态框中的保存按钮绑定点击事件
        $(".submitBtn").click(function () {
            console.log(ckeditor.getData());
            // 提交表单之前先获取ck编辑器中的文本内容保存到id为"ckeditor"的超文本框中
            $("#ckeditor").html(ckeditor.getData());
            // 提交表单
            $("#editForm").submit();
        });
    });
</script>
</body>
</html>